<template>
	<view>
		<uni-popup ref="popup" type="dialog">
			<view class="approvaled-popup">
				<view class="title">历史审批</view>
				<view class="approvaled-list">
					<view class="approvaled-list-item uni-flex">
						<view class="left">
							<view class="user-portrait"></view>
						</view>
						<view class="rihgt">
							<view class="name uni-flex uni-flex-center">
								<uni-icons color="#999" class="address color999" type="dingwei" size="18" />
								<view class="text uni-flex uni-flex-center uni-flex-space-between">
									<text class="font28">马化腾</text>
									<text class="font24">2020-10-24 15:23:09</text>
								</view>
							</view>
							<view class="right-content">
								<view class="text font28">
									任务名称任务名称任务名称任务名称
								</view>
								<view class="text font28">
									<text class="label">审批状态:</text>
									<text class="text status">审批通过</text>
								</view>
								<view class="text font28">
									<text class="label">审批意见:</text>
									<text class="color666">审批意见审批意见审批意见审批意见审批意见审批意见审批意见审批意见审批意见审批意见审批意见审批意见审批意见审批意见</text>
								</view>
							</view>
						</view>
					</view>
					<view class="approvaled-list-item uni-flex">
						<view class="left">
							<view class="user-portrait"></view>
						</view>
						<view class="rihgt">
							<view class="name uni-flex uni-flex-center">
								<uni-icons color="#999" class="address color999" type="dingwei" size="18" />
								<view class="text uni-flex uni-flex-center uni-flex-space-between">
									<text class="font28">马化腾</text>
									<text class="font24">2020-10-24 15:23:09</text>
								</view>
							</view>
							<view class="right-content">
								<view class="text font28">
									任务名称任务名称任务名称任务名称
								</view>
								<view class="text font28">
									<text class="label">审批状态:</text>
									<text class="text status">审批通过</text>
								</view>
								<view class="text font28">
									<text class="label">审批意见:</text>
									<text class="color666">审批意见审批意见审批意见审批意见审批意见审批意见审批意见审批意见审批意见审批意见审批意见审批意见审批意见审批意见</text>
								</view>
							</view>
						</view>
					</view>
					<view class="approvaled-list-item uni-flex">
						<view class="left">
							<view class="user-portrait"></view>
						</view>
						<view class="rihgt">
							<view class="name uni-flex uni-flex-center">
								<uni-icons color="#999" class="address color999" type="dingwei" size="18" />
								<view class="text uni-flex uni-flex-center uni-flex-space-between">
									<text class="font28">马化腾</text>
									<text class="font24">2020-10-24 15:23:09</text>
								</view>
							</view>
							<view class="right-content">
								<view class="text font28">
									任务名称任务名称任务名称任务名称
								</view>
								<view class="text font28">
									<text class="label">审批状态:</text>
									<text class="text status">审批通过</text>
								</view>
								<view class="text font28">
									<text class="label">审批意见:</text>
									<text class="color666">审批意见审批意见审批意见审批意见审批意见审批意见审批意见审批意见审批意见审批意见审批意见审批意见审批意见审批意见</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniIcons from '@/components/uni-icons/uni-icons.vue'
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	export default {
		components: {
			uniIcons,
			uniPopup
		},
		methods: {
			popupOpen() {
				this.$refs.popup.open()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.approvaled-list {
		.approvaled-list-item {
			margin-bottom: 20rpx;

			.left {
				.user-portrait {
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
					background: #424a60 url('~static/img/portrait.png') center center;
					background-size: 100% auto;
					margin-right: 20rpx;
				}
			}

			.rihgt {
				.name {
					.text {
						width: 90%;
					}

					.address {
						margin-right: 15rpx;
						color: #999;
					}
				}

				.right-content {
					padding: 10rpx 10rpx 10rpx 20rpx;
					border-left: 2px solid #eee;
					margin-left: 16rpx;

					.status {
						color: $bg-color-blue
					}
				}
			}
		}
	}

	.approvaled-popup {
		background-color: #fff;
		width: 90%;
		margin: 0 auto;
		padding: 0rpx 40rpx 0rpx;
		border-radius: 10rpx;

		.title {
			line-height: 90rpx;
			height: 90prx;
			text-align: center;
			border-bottom: 1px solid #eee;
			margin-bottom: 20rpx;
		}

		.approvaled-list {
			overflow-y: scroll;
			height: 800rpx;
			;
		}
	}
</style>
